<template>
  <el-dialog
    :modal="false"
    :show-close="true"
    custom-class="aabbcc"
    append-to-body
    :before-close="triggerVisible"
    :visible.sync="visible"
    :close-on-press-escape="true"
    :title="title"
    width="50%"
  >
    <div>
      <el-upload
        class="upload-demo"
        drag
        :before-upload="beforeUpload"
        :action="uploadUrl"
        :file-list="fileList"
        :accept="acceptType"
        :on-remove="removeVideo"
        :on-success="handleSuccess"
        :headers="headers"
      >
        <!-- <i class="el-icon-upload"></i> -->

        <div
          class="el-upload__text text_upload_text"
          v-if="insertType === 'video'"
        >
          点击上传 <br />
          支持格式：mp4、3gp等视频格式；大小不超过{{ maxSize / 1024 / 1024 }}M
        </div>
        <div class="el-upload__text text_upload_text" v-else>
          点击上传 <br />
          支持格式：word、excel、pdf、zip、rar等文件格式；大小不超过{{
            maxSize / 1024 / 1024
          }}M
        </div>
      </el-upload>
    </div>
  </el-dialog>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  name: "UploadVideo",
  props: {
    uEInstance: {
      type: Object,
      default: null,
    },
    title: {
      type: String,
      default: "上传视频",
    },
    insertType: {
      type: String,
      default: "video",
    },
    maxSize: {
      type: Number,
      default: 300 * 1024 * 1024,
    },
    acceptType: {
      type: String,
      default: "video/mp4, video/3gp",
    },
  },
  data() {
    return {
      uploadUrl: `${
        window.baseApi || process.env.VUE_APP_BASE_API
      }/common/upload`,
      confirmLoading: false,
      visible: true,
      progress: 0, // 进度条
      client: null, // oss示例
      fileList: [],
      file: null,
      headers: {
        Authorization: `Bearer ${getToken()}`,
      },
    };
  },
  computed: {
    videoPreview() {
      return !!(this.fileList.length && this.fileList[0].url);
    },
    videoSrc() {
      return this.fileList.length && this.fileList[0].url;
    },
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.handleSetIndex();
      }, 100);
    });
  },
  methods: {
    handleSetIndex() {
      const element = document.querySelector(".aabbcc");
      if (element) {
        const parentElement = element.parentElement;
        if (parentElement) {
          parentElement.style.zIndex = "9999";
        } else {
          console.log("该元素没有父级元素");
        }
      } else {
        console.log('未找到 class 为 "aabbcc" 的元素');
      }
    },
    triggerVisible() {
      this.$emit("close");
    },

    removeVideo(file, fileList) {
      this.fileList = fileList;
    },

    beforeUpload(file) {
      console.log("file.size", file.size);
      if (file.size > this.maxSize) {
        this.$message.warning(
          `上传文件不能超过${parseInt(this.maxSize / 1024 / 1024)}M`
        );
        return false;
      }
      this.file = file;
      //   return false; // 阻止自动上传
    },

    getFileNameWithoutExt(fileName) {
      try {
        return fileName.substring(0, fileName.lastIndexOf("."));
      } catch (error) {
        return fileName;
      }
    },
    handleSuccess(val) {
      let content = "";
      if (this.insertType === "file") {
        content = `<a href="${
          val.url
        }" _target="blank">${this.getFileNameWithoutExt(
          val.originalFilename
        )}</a>`;
      } else if (this.insertType === "video") {
        content = `<video src="${val.url}" style="max-width:100%" controls="controls">
                    您的浏览器不支持 video 标签。</video>`;
      }
      console.log("jrcontent", content);
      this.uEInstance.execCommand("inserthtml", content);
      this.triggerVisible();
    },
    triggerVisible() {
      this.$emit("close");
    },
  },
};
</script>

<style scoped lang="scss"></style>
